<template>
  <div>
    <div v-if="!show" style="color: white;width: 200px;margin: 200px auto;text-align: center">
      <h2>功能未上线</h2>
      <el-button type="text" @click="()=>{this.show=true}">静态页面预览</el-button>
    </div>
    <div v-if="show" class="t_shenbaoxuzhi">
    <div class="t_nav">
      <div class="t_nav_three">
        <a class="t_nav_hover" href="#" style="margin-right: 15px;">
                    <span>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-upload1"></use>
                        </svg>
                    </span>
          上传
        </a>
        <a class="t_nav_hover" href="#">
                    <span>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-delete-one"></use>
                        </svg>
                    </span>
          删除
        </a>
      </div>
      <div class="t_nav_search">
        <a href="#" class="t_searchImg" style="font-size: 22px;">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-search"></use>
          </svg>
        </a>
        <input type="text" placeholder="输入关键信息">
      </div>
    </div>
    <div class="t_mage">
      <div class="t_mage_info">
        <ul class="t_mage_ul1">
          <li>
                        <span class="t_ul1_li_img">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-ungroup"></use>
                            </svg>
                        </span>
            <span class="t_ul1_li_text">所有文件</span>
          </li>
          <li>
                        <span class="t_ul1_li_img">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-file-pdf"></use>
                            </svg>
                        </span>
            <span class="t_ul1_li_text">PDF</span>
          </li>
          <li>
                        <span class="t_ul1_li_img">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-file"></use>
                            </svg>
                        </span>
            <span class="t_ul1_li_text">文档</span>
          </li>
          <li>
                        <span class="t_ul1_li_img">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-image"></use>
                            </svg>
                        </span>
            <span class="t_ul1_li_text">图像</span>
          </li>
          <li>
                        <span class="t_ul1_li_img">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-file-zip"></use>
                            </svg>
                        </span>
            <span class="t_ul1_li_text">压缩文件</span>
          </li>
          <li>
                        <span class="t_ul1_li_img">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-file-unknown"></use>
                            </svg>
                        </span>
            <span class="t_ul1_li_text">其他</span>
          </li>
        </ul>
        <ul class="t_mage_ul2">
          <li class="t_mage_li_hover">
            <div class="t_info_content">
              <div class="t_info_choice">
                <input id="t_input_checkbox_id" class="t_input_checkbox" type="checkbox" />
                <label class="t_checkbox" for="t_input_checkbox_id"></label>
              </div>
              <div class="t_info_notice">
                <div class="t_info_first">
                  <div>
                    <a href="#" class="t_info_first_title">常务理事单位申请表</a>
                  </div>
                  <div>
                    <a href="#" class="t_info_first_content">本表供申报专业技术资格使用，填写内容应经人事（干部）部门审核认可</a>
                  </div>
                  <div>
                    <a href="#" class="t_info_first_browse">预览</a>
                  </div>
                </div>
                <div class="t_info_last">
                  <div>
                                        <span class="t_shangchuan">
                                            <svg class="icon" aria-hidden="true">
                                                <use xlink:href="#icon-shangchuan"></use>
                                            </svg>
                                        </span>
                    <span class="t_mem">1.7M</span>
                  </div>
                  <div>
                    <span class="t_time">2017-10-17</span>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="t_mage_li_hover">
            <div class="t_info_content">
              <div class="t_info_choice">
                <input id="t_input_checkbox_id2" class="t_input_checkbox" type="checkbox" />
                <label class="t_checkbox" for="t_input_checkbox_id2"></label>
              </div>
              <div class="t_info_notice">
                <div class="t_info_first">
                  <div>
                    <a href="#" class="t_info_first_title">常务理事单位申请表</a>
                  </div>
                  <div>
                    <a href="#" class="t_info_first_content">本表供申报专业技术资格使用，填写内容应经人事（干部）部门审核认可</a>
                  </div>
                  <div>
                    <a href="#" class="t_info_first_browse">预览</a>
                  </div>
                </div>
                <div class="t_info_last">
                  <div>
                                        <span class="t_shangchuan">
                                            <svg class="icon" aria-hidden="true">
                                                <use xlink:href="#icon-shangchuan"></use>
                                            </svg>
                                        </span>
                    <span class="t_mem">1.7M</span>
                  </div>
                  <div>
                    <span class="t_time">2017-10-17</span>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="t_mage_li_hover">
            <div class="t_info_content">
              <div class="t_info_choice">
                <input id="t_input_checkbox_id3" class="t_input_checkbox" type="checkbox" />
                <label class="t_checkbox" for="t_input_checkbox_id3"></label>
              </div>
              <div class="t_info_notice">
                <div class="t_info_first">
                  <div>
                    <a href="#" class="t_info_first_title">常务理事单位申请表</a>
                  </div>
                  <div>
                    <a href="#" class="t_info_first_content">本表供申报专业技术资格使用，填写内容应经人事（干部）部门审核认可</a>
                  </div>
                  <div>
                    <a href="#" class="t_info_first_browse">预览</a>
                  </div>
                </div>
                <div class="t_info_last">
                  <div>
                                        <span class="t_shangchuan">
                                            <svg class="icon" aria-hidden="true">
                                                <use xlink:href="#icon-shangchuan"></use>
                                            </svg>
                                        </span>
                    <span class="t_mem">1.7M</span>
                  </div>
                  <div>
                    <span class="t_time">2017-10-17</span>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="t_mage_li_hover">
            <div class="t_info_content">
              <div class="t_info_choice">
                <input id="t_input_checkbox_id4" class="t_input_checkbox" type="checkbox" />
                <label class="t_checkbox" for="t_input_checkbox_id4"></label>
              </div>
              <div class="t_info_notice">
                <div class="t_info_first">
                  <div>
                    <a href="#" class="t_info_first_title">常务理事单位申请表</a>
                  </div>
                  <div>
                    <a href="#" class="t_info_first_content">本表供申报专业技术资格使用，填写内容应经人事（干部）部门审核认可</a>
                  </div>
                  <div>
                    <a href="#" class="t_info_first_browse">预览</a>
                  </div>
                </div>
                <div class="t_info_last">
                  <div>
                                        <span class="t_shangchuan">
                                            <svg class="icon" aria-hidden="true">
                                                <use xlink:href="#icon-shangchuan"></use>
                                            </svg>
                                        </span>
                    <span class="t_mem">1.7M</span>
                  </div>
                  <div>
                    <span class="t_time">2017-10-17</span>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="t_mage_li_hover">
            <div class="t_info_content">
              <div class="t_info_choice">
                <input id="t_input_checkbox_id5" class="t_input_checkbox" type="checkbox" />
                <label class="t_checkbox" for="t_input_checkbox_id5"></label>
              </div>
              <div class="t_info_notice">
                <div class="t_info_first">
                  <div>
                    <a href="#" class="t_info_first_title">常务理事单位申请表</a>
                  </div>
                  <div>
                    <a href="#" class="t_info_first_content">本表供申报专业技术资格使用，填写内容应经人事（干部）部门审核认可</a>
                  </div>
                  <div>
                    <a href="#" class="t_info_first_browse">预览</a>
                  </div>
                </div>
                <div class="t_info_last">
                  <div>
                                        <span class="t_shangchuan">
                                            <svg class="icon" aria-hidden="true">
                                                <use xlink:href="#icon-shangchuan"></use>
                                            </svg>
                                        </span>
                    <span class="t_mem">1.7M</span>
                  </div>
                  <div>
                    <span class="t_time">2017-10-17</span>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="t_mage_li_hover">
            <div class="t_info_content">
              <div class="t_info_choice">
                <input id="t_input_checkbox_id6" class="t_input_checkbox" type="checkbox" />
                <label class="t_checkbox" for="t_input_checkbox_id6"></label>
              </div>
              <div class="t_info_notice">
                <div class="t_info_first">
                  <div>
                    <a href="#" class="t_info_first_title">常务理事单位申请表</a>
                  </div>
                  <div>
                    <a href="#" class="t_info_first_content">本表供申报专业技术资格使用，填写内容应经人事（干部）部门审核认可</a>
                  </div>
                  <div>
                    <a href="#" class="t_info_first_browse">预览</a>
                  </div>
                </div>
                <div class="t_info_last">
                  <div>
                                        <span class="t_shangchuan">
                                            <svg class="icon" aria-hidden="true">
                                                <use xlink:href="#icon-shangchuan"></use>
                                            </svg>
                                        </span>
                    <span class="t_mem">1.7M</span>
                  </div>
                  <div>
                    <span class="t_time">2017-10-17</span>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <div class="t_paging">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-count="pageNum"
          @current-change="pageChange">
        </el-pagination>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import '../js/InformIcon'
import Inform from '../js/Inform'
import $ from "jquery";
export default {
  name: "DownloadCenter",
  data(){
    return{
      show: false,
      //总页数
      pageNum: 5,
    }
  },
  methods: {
    pageChange(pageIndex){
      console.log(pageIndex)
    },
  },
  mounted() {
    Inform.DownloadCenterInit();
  }
}
</script>

<style src="../css/DownloadCenter.css" scoped></style>
<style src="../css/pageSplit.css" scoped></style>
<style scoped>

</style>
